import React, { useRef, useEffect, useState } from 'react';
import * as echarts from 'echarts';
import dataFile from '../../data/southofmingdynasty/dataFile.json';
import roleFile from '../../data/southofmingdynasty/roleFile.json';


const ROOT_PATH = 'D:\\workshop\\react_echarts\\src'; // 根据你的项目结构设置这个路径

export default function SouthOfMingDynasty() {

    const chartRef = useRef(null);
    //useState让函数NameofpeoplePage成为一个带有状态的函数组件
    //useState([])是一个初始化赋值语句，他说明这个函数的状态组件中的state是一个空数组
    //const [data, setData] = useState([]);表达的是一个赋值语句，useState返回的是一个数组
    //数组的0号元素赋值给了data,1号元素赋值给了setData
    //那么0号元素是数据，1号元素是操作数据的方法
    //数组的解构赋值
    //useState是React Hook,他允许你向组件添加一个状态变量
    //添加一个数组状态变量data,data的值为空数组
    const [data, setData] = useState([]);
    //添加一个对象状态变量roles
    const [roles, setRoles] = useState([]);
    const [chapters, setChapters] = useState([]);
    //添加一个数字类型的状态变量startIndex，他的初始值是10
    const [startIndex, setStartIndex] = useState(0);
    //添加一个数字类型的状态变量currentChapter，他的初始值是null
    const [currentChapter, setCurrentChapter] = useState(null);
    //页面更新频率
    const updateFrequency = 3000;
    const dimension = 0;

    // 国家颜色映射
    const roleColors = {
        郑成功: '#EE6666',
        孙可望: '#FAC858',
        李定国: '#EE6666',
        永历帝: '#7F00FF',
        吴三桂: '#FAC858',
        鲁监国: '#7F00FF',
        何腾蛟: '#EE6666',
        李成栋: '#EE6666',
        刘文秀: '#EE6666',
        史可法: '#EE6666',
        马士英: '#EE6666',
        郑芝龙: '#FAC858',
        弘光帝: '#7F00FF',
        隆武帝: '#7F00FF',
        多尔衮: '#8BC34A',
        多铎:   '#8BC34A',
        阿济格: '#8BC34A',
        阮大铖: '#FAC858',
        李自成: '#5470C6',
        瞿式耜: '#EE6666',
        崇祯帝: '#7F00FF',
        祖大寿: '#FAC858',
        皇太极: '#8BC34A',
        高杰: '#EE6666',
        左良玉: '#EE6666',
        金声桓: '#EE6666',
        姜瓖: '#EE6666',
        高第: '#FAC858',
        朱常淓: '#FAC858',
        黎玉田:'#EE6666',
        黄得功:'#EE6666',
        刘良佐:'#FAC858',
        刘泽清:'#FAC858',
        陈洪范:'#FAC858',
        洪承畴:'#FAC858',
        李建泰:'#FAC858',
        刘宗敏:'#5470C6',
        左懋第:'EE6666',
        冯铨:'#FAC858',
        济尔哈朗:'#8BC34A',
        孙传庭:'#EE6666',
        张献忠:'#5470C6',
        牛金星:'#5470C6',
        顾炎武:'#5470C6',
        袁宗第:'#5470C6',
        姜曰广:'#EE6666',
        范文程:'#8BC34A',
        钱谦益:'#EE6666',
        刘芳亮:'#5470C6',
        方大猷:'#FAC858',
        赵应元:'#5470C6',
        王鳌永:'#FAC858',
        张名振:'#EE6666',
        李过:'#5470C6'
        
    };

    // 获取人物的图标图标
    //图标在role.json中
    const getPortrait = (roleName) => {
        if (!roleName) return '';
        console.log(roles.find((item) => item.name === roleName) || {});
        return (roles.find((item) => item.name === roleName) || {}).emoji || '';
    };

    // 初始化图表
    useEffect(() => {
        const initChart = async () => {
            try {
                // 从外部文件获取数据
                // 处理数据
                const role = roleFile;
                const data = dataFile;
                const chaptersArray = [];

                //抽取章节数据到chaptersArray
                for (let i = 0; i < data.length; ++i) {
                    if (chaptersArray.length === 0 || chaptersArray[chaptersArray.length - 1] !== data[i][2]) {
                        chaptersArray.push(data[i][2]);
                    }
                }

                setRoles(role);
                setData(data);
                setChapters(chaptersArray);
                //数据的展示从第一个元素开始
                setCurrentChapter(chaptersArray[startIndex]);

                // 初始化图表
                if (chartRef.current) {
                    const myChart = echarts.init(chartRef.current);

                    const option = {
                        grid: {
                            top: 10,
                            bottom: 30,
                            left: 150,
                            right: 80
                        },
                        xAxis: {
                            max: 'dataMax',
                            axisLabel: {
                                formatter: (n) => Math.round(n) + ''
                            }
                        },
                        dataset: {
                            source: data.slice(1).filter((d) => d[2] === 1980)
                        },
                        yAxis: {
                            type: 'category',
                            inverse: true,
                            max: 14,
                            axisLabel: {
                                show: true,
                                fontSize: 14,
                                //同时显示名字和任务的emoji,没有配色的时候请用这一句
                                // formatter: (value) => `${value} {flag|${getPortrait(value)}}`,
                                formatter: (value) => `{flag|${getPortrait(value)}}`,
                                rich: {
                                    flag: {
                                        fontSize: 25,
                                        padding: 5
                                    }
                                }
                            },
                            animationDuration: 300,
                            animationDurationUpdate: 300
                        },
                        series: [
                            {
                                realtimeSort: true,
                                seriesLayoutBy: 'column',
                                type: 'bar',
                                itemStyle: {
                                    // 这里的parm是content.json中的一条数据
                                    color: (param) => roleColors[param.value[1]] || '#5470c6'
                                },
                                encode: {
                                    x: dimension,
                                    y: 3
                                },
                                label: {
                                    show: true,
                                    precision: 0,
                                    position: 'right',
                                    valueAnimation: true,
                                    fontFamily: 'monospace'
                                }
                            }
                        ],
                        animationDuration: 0,
                        animationDurationUpdate: updateFrequency,
                        animationEasing: 'linear',
                        animationEasingUpdate: 'linear',
                        graphic: {
                            elements: [
                                {
                                    type: 'text',
                                    right: 160,
                                    bottom: 60,
                                    style: {
                                        text: currentChapter,
                                        font: 'bolder 80px monospace',
                                        fill: 'rgba(100, 100, 100, 0.25)'
                                    },
                                    z: 100
                                }
                            ]
                        }
                    };

                    myChart.setOption(option);
                    // setTimeout两个参数，一个表示要做的事情，一个表示延迟的时间
                    for (let i = startIndex; i < chaptersArray.length - 1; ++i) {
                        setTimeout(() => {
                            updateChapter(myChart, chaptersArray[i + 1]);
                        }, (i - startIndex) * updateFrequency);
                    }

                    // 更新章节数据
                    function updateChapter(myChart, chapter) {
                        const source = data.slice(1).filter((d) => d[2] === chapter);
                        myChart.setOption({
                            dataset: {
                                source
                            },
                            graphic: {
                                elements: [
                                    {
                                        type: 'text',
                                        right: 160,
                                        bottom: 25,
                                        style: {
                                            text: "故事线: "+chapter,
                                            fontSize: 20,
                                            fontWeight: 'bold',
                                            fill: '#000',
                                        }
                                    }
                                ]
                            }
                        });
                    }
                }
            } catch (error) {
                console.error('Error fetching or initializing chart:', error);
            }
        };

        initChart();
    }, [startIndex, currentChapter]);

    return (
        <div>
            <h2>南明史(顾诚著)</h2>
            <div ref={chartRef} style={{ height: '830px', width: '100%' }}></div>
        </div>
    )
}
